﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>英业达科技有限公司智慧光伏大屏</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
</head>

<body>
    <div class="loading">
        <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
    </div>
    <div class="data" id="app">
        <div class="data-title">

            <div>
                <img src="./images/logo.png" alt="">
                <span class="title">
                    创新 品质 虚心 力行
                </span>
            </div>
            <div class="title-center">
                英业达科技有限公司智慧光伏大屏

            </div>

            <div>
                <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tx&skin=sogou&color=ffffff&fontsize=15"
                    frameborder="0" width="100%" height="30" allowtransparency="true"></iframe>
            </div>
        </div>
        <div class="data-content">
            <div class="con-left fl">
                <div class="left-top">
                    <div class="info boxstyle">
                        <div class="title">发电量实况</div>
                        <div class="info-main" style="margin-top: 50px">
                            <ul>
                                <li><span>并网容量（MWp）</span>
                                    <p>{{ bulidCapacity }}</p>
                                </li>
                                <li><span>运行天数(天)</span>
                                    <p>315</p>
                                </li>
                                <li><span>当日发电量(kWh)</span>
                                    <p>{{ dayPower }}</p>
                                </li>
                                <li><span>当月发电量(万kWh)</span>
                                    <p>{{ monthPower }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="top-bottom boxstyle">
                        <div class="title">当月发电量</div>
                        <div id="echarts_1" class="charts"></div>
                    </div>
                </div>
                <div class="left-bottom boxstyle">
                    <div class="title">当年发电量</div>
                    <div id="echarts_2" class="charts"></div>
                </div>
            </div>
            <div class="con-center fl">
                <div class="zongji">
                    <div>
                        <p>{{ yearPower }}</p>
                        <p>年发电量（万kWh）</p>
                    </div>
                    <div>
                        <p>136667</p>
                        <p>年发电时间（h）</p>
                    </div>
                    <div>
                        <p>136667</p>
                        <p>年减排量（tCO2e）</p>
                    </div>
                    <div>
                        <p>{{ totalPower }}</p>
                        <p>累计发电量（万kWh）</p>
                    </div>
                    <div>
                        <p>136667</p>
                        <p>累计发电时间（h）</p>
                    </div>
                    <div>
                        <p>{{totalIncome}}</p>
                        <p>累计减排量（万kWh）</p>
                    </div>
                </div>
                <!-- <div>
                    <img style="width: 100%;height: 100%;" src="./images/map_bg.png">
                </div> -->
                <!-- <div class="cen-bottom boxstyle">
                    <div class="title">光伏发电原理图</div>
                    <div class="charts">
                        <img style="width: 90%;height: 90%" src="./images/ylt.jpg">
                    </div>
                </div> -->
            </div>
            <div class="con-right fr">
                <div class="right-top boxstyle">
                    <div class="title">设备发电率</div>
                    <div id="echarts_4" class="charts"></div>
                </div>
                <div class="right-center boxstyle">
                    <div class="title">实时告警</div>
                    <div id="echarts_5" class="charts"></div>
                </div>
                <div class="right-bottom boxstyle">
                    <div class="title">等效小时数</div>
                    <div id="echarts_6" class="charts"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
<script type="text/javascript" src="js/ecStat.min.js"></script>
<script type="text/javascript" src="js/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.4.0/map/js/province/shanxi.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=1y1ddKw01qyA02CH0f3tN9aBNIEZGDRK"></script>
<script type="text/javascript" src="js/bmap.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/map.js"></script>
<script src="js/vue.min.js"></script>
<!-- <script type="text/javascript" src="js/crypto-js/crypto-js.js"></script>
<script type="text/javascript" src="js/crypto.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/require.js"></script> -->

<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data: {
            bulidCapacity: '1.9',
            yearPower: '136667',
            dayPower: '136667',
            monthPower: '136667',
            totalPower: '136667',
            totalIncome: '136667',
        }
    });
    $(function () {
        QueryRecords();

    });
    function QueryRecords() {
        $.ajax({
            type: "get",        // 请求方式
            url: "http://localhost:8081/describeRecordPower", // 请求路径
            dataType: "json",   // 预期返回一个 json 类型数据
            success: function (data) {   // data是形参名，代表返回的数据
                if (data.Response.Error != null) {
                    alert(data.Response.Error.Message);
                } else {
                    console.log(data.Response.Records[0].day_power);
                    vm.dayPower = data.Response.Records[0].day_power;
                    vm.monthPower = data.Response.Records[0].month_power;
                    vm.yearPower = data.Response.Records[0].year_power;
                    vm.totalPower = data.Response.Records[0].total_power;
                    //vm.totalIncome = data.Response.Records[0].total_income;
                }

            }
        });
        $.ajax({
            type: "get",        // 请求方式
            url: "http://localhost:8081/describeRecords", // 请求路径
            dataType: "json",   // 预期返回一个 json 类型数据
            success: function (data) {   // data是形参名，代表返回的数据
                if (data.Response.Error != null) {
                    alert(data.Response.Error.Message);
                } else {
                    console.log(data.Response.Records[0].bulid_capacity);
                    vm.bulidCapacity = data.Response.Records[0].bulid_capacity;
                }

            }
        });
    }

    $(window).load(function () {
        $(".loading").fadeOut();
    })

</script>

</html>